<template>
    <div class="flexbox flexcolumn height_100">
        <div class="flex over_box">
            <el-form ref="createform" :model="dataForm" label-position="top" class="create_form" :hide-required-asterisk='true' size="small">
                <div class="com_box">
                    <StepBox :dataForm="dataForm" />
                    <div class="pl_20 pr_20 hide_box">
                        <TargetType :dataForm="dataForm"/>
                        <div class="tk_title">广告设置</div>
                        <CtGroupName :dataForm="dataForm" @sessionSave="sessionSave"/>
                        <CtGroupStatus :dataForm="dataForm" @sessionSave="sessionSave"/>
                    </div>
                </div>
                <div class="com_box pd_20 mt_12 hide_box">
                    <CreativeList :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <div class="tk_title">商品详情</div>
                    <CtGoods :dataForm="dataForm" @sessionSave="sessionSave" @addGoods="addGoods"/>
                    <ChoiceGoods :dataForm="dataForm" @sessionSave="sessionSave" ref="goods_ref"/>
                    <div class="divider_line"></div>
                    <div class="tk_title">创意详情</div>
                    <CtFormat :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <CtVideo :dataForm="dataForm" @sessionSave="sessionSave" @addVideo="addVideo" @accVideo="accVideo"/>
                    <ChoiceVideo :dataForm="dataForm" @sessionSave="sessionSave" ref="video_ref"/>
                    <MaterialVideo :dataForm="dataForm" @sessionSave="sessionSave" ref="acc_video_ref"/>
                    <CtCar :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <CtCopywriting :dataForm="dataForm" @sessionSave="sessionSave"/>
                </div>
            </el-form>
        </div>
        <div class="tk_footer com_box mt_12">
            <el-button plain class="el-button-width plain_red" size="small" @click="cancelCreation">取消创建</el-button>
            <el-button plain class="el-button-width" size="small" @click="preStep">上一步</el-button>
            <el-button type="primary" class="el-button-width" size="small" @click="nextOne('createform')">下一步</el-button>
        </div>
    </div>
</template>

<script>
import "@/assets/css/tiktok.css";
import {mixins} from '@/assets/js/tkmixins.js'
import StepBox from "./model/StepBox";
import TargetType from "./model/TargetType";
import CtGroupName from "./model/CtGroupName";
import CtGroupStatus from "./model/CtGroupStatus";
import CreativeList from "./model/CreativeList";
import CtGoods from "./model/CtGoods";
import ChoiceGoods from "./model/ChoiceGoods";
import CtFormat from "./model/CtFormat";
import CtVideo from "./model/CtVideo";
import ChoiceVideo from "./model/ChoiceVideo";
import MaterialVideo from "./model/MaterialVideo";
import CtCar from "./model/CtCar";
import CtCopywriting from "./model/CtCopywriting";


export default {
    props: ["dataForm"],
    mixins: [mixins],
    components: {
        StepBox,
        TargetType,
        CtGroupName,
        CtGroupStatus,
        CreativeList,
        CtGoods,
        ChoiceGoods,
        CtFormat,
        CtVideo,
        ChoiceVideo,
        MaterialVideo,
        CtCar,
        CtCopywriting
    },
    name: "",
    data() {
        return {
            
        };
    },
    created() {
        
    },
    methods: {
        
        // 选择商品
        addGoods(){
            this.$refs.goods_ref.getData()
        },

        // 选择视频
        addVideo(){
            this.$refs.video_ref.getData()
        },
        //选择素材库视频
        accVideo(){
            this.$refs.acc_video_ref.getData()
        },
        // 提交添加
        nextOne(formName) {
            const creatives = this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].creatives;
            const isVideoInfoPresent = creatives.length > 0 && creatives[0].video_info;
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if(!isVideoInfoPresent){
                        for (let index = 0; index < creatives.length; index++) {
                            if(!creatives[index].ad_text){
                                this.$message.error("请完善创意素材 文案！");
                                return
                            }
                        }
                    }
                    this.dataForm.step = 5;
                    window.sessionStorage.setItem(
                        "tkForm",
                        JSON.stringify(this.dataForm)
                    );
                } else {
                    this.$message.error("请完善信息！");
                    return false;
                }
            });
        },
        
        // 上一步
        preStep() {
            this.dataForm.step = 3;
            this.sessionSave();
        },

        sessionSave() {
            window.sessionStorage.setItem(
                "tkForm",
                JSON.stringify(this.dataForm)
            );
        },
    },
};
</script>


<style scoped>
.divider_line{
    border-top: 1px solid #DCDEE2;
    transform: scaleY(0.5);
}
.hide_box{
    overflow: hidden;
}
</style>

